<template>
  <div>
    <div class="home">
    <div class="item_container"
    v-for="(item,index) in listItems"
    :key="index"
    @click="onClick(item)">
      <img :src="item.productImage"/>
      <div>{{item.productName}}</div>
    </div>
   </div>
   <div class="footer_refresh" v-myShow="isLoading">
     <img src="../assets/timg.gif"/>
   </div>
  </div>
</template>

<script>
// @ is an alias to /src
import axios from "axios";

export default {
  name: 'Home',
  components: {
    
  },
  data(){
    return{
      listItems:[],
      isLoading:false
    }
  },
  methods:{
    onScroll(){
      console.log(document.documentElement.scrollTop);
      //获取整个文档的高度
      var docHeight = document.documentElement.scrollHeight;
      //获取文档可滚动距离
      var scrollOffset = document.documentElement.scrollTop;
      //获取窗口的高度
      var windowHeight = document.documentElement.clientHeight;

      if(docHeight-scrollOffset-windowHeight === 0){
        this.isLoading = true;
        window.setTimeout(()=>{
           axios.get("http://localhost:8080/data2.json").then((res)=>{
             console.log(res)
             this.listItems = [...this.listItems,...res.data.result.list];
             this.isLoading = false;
           }).catch(()=>{

           })
        },3000)


      }
    },
    onClick(item){
      this.$router.push({
        name:"About",
        params:{
          item:item
        }
      })
    }
  },
  mounted(){
    axios.get("http://localhost:8080/data.json").then((res)=>{
      console.log(res)
      this.listItems = res.data.result.list
    }).catch(()=>{

    })

    window.addEventListener("scroll",this.onScroll)
  },
  directives:{
    myShow:{
      inserted:function(el,binding){
        if(binding.value){
          el.style.visibility = "visible"
        }else{
          el.style.visibility = "hidden"
        }
      },
      update:function(el,binding){
         if(binding.value){
          el.style.visibility = "visible"
        }else{
          el.style.visibility = "hidden"
        }
      }
    }
  }
}
</script>

<style scoped>
.home
{
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.item_container
{
  width: 20%;
  height: 300px;
  border: 1px solid red;
  margin: 10px 10px;
}

.item_container img
{
  width: 100%;
}

.footer_refresh
{
  width: 100%;
  height: 150px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.footer_refresh img 
{
  width: 150px;
}
</style>
